<template>
	<view class="container">
		<view class="upload-img" @click="uploadImg">
			<h3 class="title2 w">请上传新的头像：</h3>
			<view class="upload">
				<view class="img-icon" v-if="value == ''">
					<tui-icon name="pic"></tui-icon>
				</view>
				<view v-else>
					<image :src="value" mode="aspectFill"></image>
				</view>
			</view>
		</view>


		<view class="fotter">
			<view class="add">
				<tui-button shape="circle" @click="publish" limit='1' :disabled="disabled">点击上传</tui-button>
			</view>
		</view>


		<tui-toast ref="toast"></tui-toast>
	</view>
</template>

<script>
	import {
		pathToBase64,
		base64ToPath
	} from '@/js_sdk/mmmm-image-tools/index.js'
	export default {
		data() {
			return {
				value: '',
				uid: '',
				type: 0,
				usr: {},
				disabled: true,
			}
		},
		methods: {
			uploadImg() {
				let that = this
				uni.chooseImage({
					count: 1, // 最多可以选择的图片张数
					sizeType: ['original'], //original 原图，compressed 压缩图，默认二者都有
					sourceType: ['album'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
					success: function(res) {
						// console.log(JSON.stringify(res.tempFilePaths));
						that.value = res.tempFilePaths[0]
						that.disabled = false
					}
				})
			},

			publish() {
				let that = this;
				uni.uploadFile({
					url: '/usr/update',
					filePath: that.value,
					name: 'file',
					success(uploadRes) {
						const imageUrl = JSON.parse(uploadRes.data).url; // 获取上传后的图片URL
						console.log(imageUrl)
						uni.request({
							url: '/usr/update', // 替换为实际的保存接口地址
							method: 'PUT',
							data: {
								imageUrl: imageUrl
							},
							success(requestRes) {
								console.log('图片URL上传成功');
							},
							fail(error) {
								console.error('图片URL上传失败', error);
							}
						});
					},
					fail(error) {
						console.error('图片上传失败', error);
					}
				});
			},
			saveImageUrl(imageUrl) {
				uni.request({
					url: '/usr/update', // 替换为实际的保存接口地址
					method: 'PUT',
					data: {
						imageUrl: imageUrl
					},
					success(requestRes) {
						console.log('图片URL上传成功');
					},
					fail(error) {
						console.error('图片URL上传失败', error);
					}
				});
			},
			publish1() {

				const updateData = {
					id: "", // 用户ID
					username: "",
					passw: "",
					notenum: "",
					visitnum: "",
					role: "",
					time: "",
					photourl: this.value
				};
				// 生成可下载的URL
				uni.getRealPath({
					filePath: this.value,
					success: function(res) {
						var realURL = res.filePath;
						console.log("真的:" + realURL);
						// 在这里可以使用转换后的URL进行后续操作
					},
					fail: function(err) {
						console.error(err);
					}
				});
				uni.request({
					url: '/usr/update',
					method: 'PUT',
					header: {
						'content-type': 'application/json'
					},
					data: updateData,
					success: (res) => {
						if (res.statusCode === 200) {
							// 更新成功的处理逻辑
							console.log(this.value)
						}
					},
					fail: (err) => {
						console.error(err);
					}
				});
			},
			getUsrInfo(uid) {
				let params = {
					uid: uid
				}
				getUsrInfo(params).then(res => {
					this.usr = res.data
					this.value = res.data.photourl
				})
			},

		}
	}
</script>

<style>
	@import url("updateImg.css");
</style>